<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            分数 {{score}}
            <div>级别 {{score>=60?"及格":"不及格"}}</div>
            <div>级别 {{score>=60?(score>=70?(score>=80?"优秀":"良好"):"及格"):"不及格"}}</div>
        </div>
        <div v-if="score<60">
            不及格
        </div>
        <div v-else-if="score<70">
            及格
        </div>
        <div v-else-if="score<80">
            良好
        </div>
        <div v-else>
            优秀
        </div>
        <button v-on:click="setScore">随机赋值</button>
    </div>
    
</body>
<script>
      new  Vue({
        el:"#app",
        data:{
            score:10
        },
        methods:{
            setScore(){
                this.score = Math.round(Math.random()*100)

            }
          
        }

      })

</script>
</html>